<!--
  ~ Copyright (c) Jack魏 2023 - 2024, All Rights Reserved.
  -->

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="Layui登录,yiyi-web登录页面,后台管理系统,权限系统">
  <link rel="icon" th:href="@{/images/yiyi.ico}" type="image/x-icon">
  <meta name="description" content="登录页面">
  <meta name="author" content="Jack魏">
  <title>登录</title>
  <!-- layui -->
  <link type="text/css" rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
  <script type="text/javascript" th:src="@{/layui/layui.js}" charset="utf-8"></script>
  <!-- jQuery -->
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <!-- config 常用配置 -->
  <script type="text/javascript" th:src="@{/js/config.js}"></script>
  <!-- CSS -->
  <link type="text/css" rel="stylesheet" th:href="@{/css/index.css}" media="all"/>
</head>
<body>
<p class="home-title">
  YiYi Web 后台管理系统
</p>
<form class="layui-form layui-text">
  <div class="index-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="account" value="" lay-verify="required" placeholder="账号" lay-reqtext="请填写账号"
               autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="密   码"
               lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-row">
        <div class="layui-form-item">
          <div class="layui-row">
            <div class="layui-col-xs5">
              <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-vercode"></i>
                </div>
                <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码"
                       lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
              </div>
            </div>
            <div class="layui-col-xs5">
              <div style="margin-left: 10px;">
                <img id="captchaKey">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
      <a href="forget" style="float: right; margin-top: 7px;">忘记密码？</a>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
    </div>
    <a href="register">注册帐号</a>
  </div>
  </div>
</form>

<script>
  // 清空本地存储
  layui.data(LOCAL, null);

  layui.use(function () {
    var form = layui.form;
    var layer = layui.layer;

    // 验证码
    var captchaKey = new Date().getTime();
    lay('#captchaKey').attr('src', 'index/getCaptcha?key=' + captchaKey);
    $('#captchaKey').click(function () {
      captchaKey = new Date().getTime();
      $('#captchaKey').attr('src', 'index/getCaptcha?key=' + captchaKey);
    })

    // 提交事件
    form.on('submit(login)', function (data) {
      var params = data.field; // 获取表单字段值
      params.captchaKey = captchaKey;
      console.log(params)

      // 此处可执行 Ajax 等操作
      $.ajax({
        type: 'POST', // 请求类型
        async: true, // 默认true,异步
        data: JSON.stringify(params), // 请求参数
        dataType: 'json', // 数据类型
        url: 'index/login', // 请求URL
        contentType: 'application/json;charset=utf-8', // 发送的数据类型
        success: function (data) {
          if (data.code === 200) {
            layer.msg('登录成功，欢迎~', {icon: 6});
            // 成功后等待2秒，跳转到管理页面
            setTimeout(function () {
              window.location.href = window.location.href.replace('login', '')
            }, 500);
          } else {
            layer.msg(data.message, {icon: 5});
          }
        }, error: function (XMLHttpRequest, textStatus, errorThrown) {
          layer.msg('服务器内部错误！', {icon: 2});
        }
      });
      return false; // 阻止默认 form 跳转
    });
  });
</script>

</body>
</html>